/**
 * 
 * @使用方法：
 * 1.jquery.citypicker就jquery插件，使用此插件前必须先引用jquery.js库文件
 * 2.再引用此库文件，引用方式：<script type="text/javascript" src="jquery.citypicker.js"></script>
 * 3.引用CSS样式文件和图片：<link type="text/css" href="css/jquery.citypicker.css" rel="stylesheet" />
 */
;
cities = new Array();
pro = new Array("A-G", "H-L", "M-T", "W-Z");
cities['A-G'] = new Array("安庆", "阿勒泰", "安康", "鞍山", "安顺", "安阳", "阿克苏", "包头", "蚌埠", "北海", "北京", "百色", "保山", "博乐", "长治", "长春", "长海", "常州", "昌都", "朝阳", "潮州", "常德", "长白山", "成都", "重庆", "长沙", "赤峰", "大同", "大连", "达县", "大足", "东营", "大庆", "丹庆", "大理", "敦煌", "鄂尔多斯", "恩施", "二连浩特", "佛山", "福州", "阜阳", "富蕴", "贵阳", "桂林", "广州", "广元", "赣州", "格尔木", "广汉", "固原");
cities['H-L'] = new Array("呼和浩特", "哈密", "黑河", "海拉尔", "哈尔滨", "海口", "衡阳", "衡州", "黄山", "杭州", "邯郸", "合肥", "黄龙", "汉中", "和田", "惠州", "吉安", "吉林", "酒泉", "鸡西", "晋江", "锦州", "景德镇", "嘉峪关", "井冈山", "济宁", "九江", "佳木斯", "济南", "喀什", "昆明", "康定", "克拉玛依", "库尔勒", "喀纳斯", "库车", "兰州", "洛阳", "丽江", "梁平", "荔波", "庐山", "林芝", "柳州", "泸州", "联运港", "黎平", "连城", "拉萨", "临沧", "临沂");
cities['M-T'] = new Array("牡丹江", "芒市", "满洲里", "绵阳", "梅县", "漠河", "南京", "南充", "南宁", "南阳", "南通", "那拉提", "南昌", "宁波", "攀枝花", "秦皇岛", "庆阳", "且末", "齐齐哈尔", "青岛", "汕头", "深圳", "石家庄", "三亚", "沈阳", "上海", "思茅", "鄯善", "韶关", "沙市", "苏州", "唐山", "铜仁", "通化", "塔城", "腾冲", "台州", "天水", "天津", "通辽", "太原", "吐鲁番");
cities['W-Z'] = new Array("威海", "武汉", "梧州", "文山", "无锡", "潍坊", "武夷山", "乌兰浩特", "温州", "乌鲁木齐", "芜湖", "万州", "乌海", "兴义", "西昌", "厦门", "香格里拉", "西安", "襄樊", "西宁", "锡林浩特", "西双版纳", "徐州", "兴城", "兴宁", "邢台", "义乌", "永州", "榆林", "延安", "运城", "烟台", "银川", "宜昌", "宜宾", "盐城", "延吉", "玉树", "伊宁", "伊春", "珠海", "昭通", "张家界", "舟山", "郑州", "中卫", "芷江", "湛江", "中甸", "遵义");
;
(function($){
    jQuery.fn.extend({
        "citypicker": function(){
            return this.each(function(){
                new jQuery.CityPicker(this);
            });
        }
    });
    jQuery.CityPicker = function(obj){
        var $input = $(obj);
        //产生一个选择器
        var $container = setupContainer();
        
        $input.click(function(event){
            //设置当前不可读
            this.readOnly = true;
            //得到输入框的位置
            var offset = $input.offset();
            //得到输入框的高度,宽度
            var height = $input.height();
            var width = $input.width();
            //计算选择器的位置
            var cont_top = offset.top + height;
            var cont_left = offset.left;
            //设置选择器出现的位置
            $container.appendTo($("body")).css({
                'top': cont_top + 5,
                'left': cont_left
            });
            if ($container.is(":hidden")) {
                //当前选择器是隐藏的
                $container.show(10);
            }
            else 
                if ($container.is(":visible")) {
                    //当前选择器是显示的
                    //停止事件冒泡
                    event.stopPropagation();
                }
        });
        //点击在选择器以外，隐藏它
        $(document).bind("click", function(event){
            var $target = $(event.target);
            var hideFag = $target.parent("div").attr("id");
            if (!(hideFag == "citypicker_container" || hideFag == "citypicker_caption" || hideFag == "citypicker_city" || hideFag == "citypicker_pro")) {
                $container.hide();
            }
        });
        
        //初始化选择器函数
        function setupContainer(){
            var container = document.createElement("div");
            var caption = document.createElement("div");
            var prov = document.createElement("div");
            var city = document.createElement("div");
            
            var $container = $(container).attr("id", "citypicker_container");
            var $caption = $(caption).attr("id", "citypicker_caption");
            var $prov = $(prov).attr("id", "citypicker_pro");
            var $city = $(city).attr("id", "citypicker_city");
            $container.append($caption).append($prov).append($city);
            $("<h1>选择城市</h1>").appendTo($caption);
            $("<span>关闭</span>").appendTo($caption).click(function(){
               $container.slideUp(100);
            });
            for (p in pro) {
                $("<label>" + pro[p] + "</label>").appendTo($prov).click(function(){
                    var i = $(this).text();
                    //被点了的省份字体色改变
                    $(this).css({
                        'color': 'blue'
                    });
                    //清空城市，让另外一个省的城市显示在此处
                    $city.empty();
                    for (c in cities[i]) {
                        $("<label>" + cities[i][c] + "</label>").appendTo($city).click(function(){
                            //这里把相应的值设置到输入框当中去
                            $(obj).val($(this).text());
                            //被点了的城市字体色改变
                            $(this).css({
                                'color': 'blue',
                                'font-weight': 'bold'
                            });
                            //选择以后隐藏选择器
                            $container.fadeOut("fast");
                        });
                    }
                });
            }
            return $container;
        }
    }
})(jQuery);
